<template>
  <div class="app-container" style="max-height:500px;overflow:auto">
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中..." border fit highlight-current-row stripe>
      <el-table-column align="center" label="ID" prop="id" width="80px"/>
      <el-table-column align="center" label="用户" width="100">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatarUrl" size="small"/>
          <div>{{ scope.row.nickName }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="卷码" prop="code" width="200"/>
      <el-table-column align="center" label="电子卷" prop="remaining" width="150">
        <template slot-scope="scope">
          <div>减免{{ scope.row.discount }}元</div>
          <div>满{{ scope.row.minimums }}元可用</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="statusName" width="80"/>
      <el-table-column align="center" label="有效期">
        <template slot-scope="scope">
          {{ scope.row.startDate }} 至 {{ scope.row.endDate }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="领卷时间" prop="pickDate"/>
      <el-table-column align="center" label="使用时间" prop="useDate"/>
    </el-table>
    <br><br><br><br>
    <pagination v-permission="['coupon:list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" style="position:absolute;bottom:0;left:20%;" @pagination="initList"/>
  </div>
</template>

<script>
import { CouponService } from '@/api/PromotionService'
import Pagination from '@/components/Pagination'

export default {
  name: 'Coupon',
  components: { Pagination },
  props: {
    couponId: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      list: undefined, total: 0, listLoading: false,
      listQuery: { pageNo: 1, pageSize: 20, couponId: undefined }
    }
  },
  watch: {
    couponId: function(newVal, oldVal, $event) {
      this.listQuery.couponId = newVal
      this.initList()
    }
  },
  created() {
    this.listQuery.couponId = this.couponId
    this.initList()
  },
  methods: {
    initList() {
      this.listLoading = true
      CouponService.getUserGetRecord(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    }
  }
}
</script>
